import './order.less';
import { Table } from 'antd'
import React, {FC, useState, useEffect} from "react"
const Order:FC = function () {
 
  const columns:any = [
    { title: '序号',  align:'center', dataIndex: 'key',     key: 'key' },
    { title: '编号',  align:'center', dataIndex: 'address',     key: 'address' },
    { title: '姓名',  align:'center', dataIndex: 'name',    key: 'name' },
    { title: '手机号',align:'center', dataIndex: 'ipohon',  key: 'ipohon' },
    { title: '状态',  align:'center', dataIndex: 'status',  key: 'status' },
    { title: '支付金额',align:'center', dataIndex: 'second',  key: 'second' },
    { title: '支付时间',  align:'center', dataIndex: 'renting', key: 'renting' },
    { title: '操作',  align:'center', dataIndex: '',        key: 'x',
      render: (row:any) => 
      <span onClick={()=>setbtnremove(row.key)}>删除</span>
    },
  ];
  const data = [
    {
      key: 1,
      name: 'John Brown',
      ipohon:'17606141648',
      address: '100101',
      second:'10.00',
      renting:'2021.01.01  13:00:00',
      status:'二手房出租',
      age: 32,
      description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
    },{
      key: 2,
      name: 'Jim Green',
      ipohon:'17606141648',
      address: '100102',
      second:'10.00',
      renting:'2021.01.01  13:00:00',
      status:'有房出租',
      age: 42,
      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
    },{
      key: 3,
      name: 'Not Expandable',
      ipohon:'11111',
      address: '100103',
      second:'10.00',
      renting:'2021.01.01  13:00:00',
      status:'我想买个房',
      age: 29,
      description: 'This not expandable',
    },{
      key: 4,
      name: 'Joe Black',
      ipohon:'2222',
      address: '100104',
      second:'10.00',
      renting:'2021.01.01  13:00:00',
      status:'我想买个房',
      age: 32,
      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
    }
  ];
  let [title1, settitle1] = useState('')
  let [title2, settitle2] = useState('')
  let [pagedata, setpagedata] = useState(data)
  let [searchName, setsearchName] = useState('')
  let [searchName2, setsearchName2] = useState('')
  let [btnremove, setbtnremove] = useState('') as any

  useEffect(() => {
    if(searchName){
        let newdata = data.filter(item=>item.status.includes(searchName))
        
        if(searchName2){
            newdata = pagedata.filter(item=>item.ipohon.includes(searchName2))
            setpagedata(newdata)
        }
        setpagedata(newdata)
    }
    if(searchName2){
        let newdata = data.filter(item=>item.ipohon.includes(searchName2))
        
        if(searchName){
            newdata = pagedata.filter(item=>item.status.includes(searchName))
            setpagedata(newdata)
        }
        setpagedata(newdata)
    }
    if(searchName2 && searchName){
        let newdata = data.filter(item=>item.ipohon.includes(searchName2))
        setpagedata(newdata)
    }
    if(btnremove){
      console.log(btnremove)
      let a = pagedata.filter(item=>item.key!==btnremove)
      setpagedata(a)
    }
  }, [searchName,searchName2,btnremove])

  function serchall(title1:string,title2:string){
    setsearchName(title1)
    setsearchName2(title2)
  }
  return (
    <div className='order'>
      <div className='region_box'>
        <div>订单类型:<input type="text" placeholder='请输入' 
            value={title1} onChange={e=>settitle1(e.target.value)} /></div>
        <div>手机号:<input type="text" placeholder='请输入手机号/用户名/订单号'
            value={title2} onChange={e=>settitle2(e.target.value)} /></div>

        <button onClick={()=>serchall(title1,title2)}>查询</button>
      </div>
      <Table columns={columns} dataSource={pagedata} scroll={{ x: 1300 }} />
    </div>
  );
}
export default Order